<template>
  <div class="page_header">
    <div class="warp bg-info">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <b-navbar class="bg-info" toggleable="lg" type="dark">
              <b-navbar-brand href="#">NavBar</b-navbar-brand>

    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
    
              <b-collapse id="nav-collapse" is-nav>
                <b-navbar-nav>
                  <router-link
                    v-for="(o, i) in nav_main"
                    :to="o[vm.url]"
                    :key="i"
                    class="nav_item"
                    >{{ o[vm.name] }}</router-link
                  >
                </b-navbar-nav>

                <!-- Right aligned nav items -->
                <b-navbar-nav class="ml-auto">
                  <!-- 搜索栏 -->
                  <b-nav-form>
                    <b-form-input
                      size="sm"
                      class="mr-sm-2"
                      placeholder="Search"
                    ></b-form-input>
                    <b-button size="sm" class="my-2 my-sm-0" type="submit"
                      >Search</b-button
                    >
                  </b-nav-form>
                  <!-- 已登录 -->
                  <b-nav-item-dropdown text="已登录" v-if="user.user_id" right>
                    <b-dropdown-item @click="sign_out()">
                      退出
                    </b-dropdown-item>
                  </b-nav-item-dropdown>
                  <!-- 未登录 -->
                  <b-nav-item-dropdown text="账户" v-else right>
                    <b-dropdown-item
                      :to="o[vm.url]"
                      v-for="(o, i) in not_login_dropdown"
                      :key="i"
                    >
                      {{ o[vm.name] }}
                    </b-dropdown-item>
                  </b-nav-item-dropdown>

                  <b-nav-item-dropdown text="我的" right>
                    <b-dropdown-item
                      :to="o[vm.url]"
                      v-for="(o, i) in my_nav"
                      :key="i"
                    >
                      {{ o[vm.name] }}
                    </b-dropdown-item>
                  </b-nav-item-dropdown>
                  

                  <b-nav-item-dropdown text="更多" right>
                    <b-dropdown-item
                      :to="o[vm.url]"
                      v-for="(o, i) in nav_more"
                      :key="i"
                    >
                      {{ o[vm.name] }}
                    </b-dropdown-item>
                  </b-nav-item-dropdown>
                </b-navbar-nav>
              </b-collapse>
            </b-navbar>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixin from "../../mixins/page.js";
export default {
  mixins:[mixin],
  data() {
    return {
      nav_main: [
        {
          name: "首页",
          url: "/",
        },
        {
          name: "商品",
          url: "/goods/list",
        },
        {
          name: "资讯",
          url: "/article/list",
        },
        {
          name: "论坛",
          url: "/forum/list",
        },
        {
          name: "关于我们",
          url: "/about/index/",
        },
      ],
      nav_more:[
        {
          name: "公告",
          url: "/notice/list",
        },
        {
          name: "留言",
          url: "/message/list",
        },
        {
          name: "留言编辑",
          url: "/message/index",
        },
      ],
      my_nav: [
        {
          name: "我的账户",
          url: "/user/index",
        },
        {
          name: "我的收藏",
          url: "/user/collect",
        },
        {
          name: "我的购物车",
          url: "/cart/list",
        },
      ],
      not_login_dropdown: [
        {
          name: "登录",
          url: "/account/login",
        },
        {
          name: "注册",
          url: "/account/register",
        },
      ],
      showInput: false,
      search_val: "",
      vm: {
        name: "name",
        url: "url",
      },
    };
  },
  methods: {
    // 获取导航栏
    get_menu() {},
    sign_out(){
				this.$store.commit('sign_out');
    }
  },
  created() {
    this.get_menu();
  },
};
</script>

<style scoped="scoped">
.navbar-nav a {
  margin: 0 0.5rem;
}

@media (max-width: 576px) {
  .navbar-nav {
    text-align: center;
    line-height: 2rem;
  }
}
.nav_item{
  display: flex;
  align-items: center;
}
</style>
